<template>
  <div class="movie-box">
    <HeadPage @locationPopupHandel="locationPopupHandel">
      <div slot="headerSlot">
        <van-tabs
          class="header-tabs"
          :line-width="90"
          :line-height="2"
          v-model="active"
          swipeable
          animated
          @change="tabsChange"
        >
          <van-tab title="正在热映" name="1"></van-tab>
          <van-tab title="即将上映" name="2"></van-tab>
        </van-tabs>
        <van-icon
          name="search"
          color="#ee0a24"
          size="20px"
          @click="searchHandel"
        />
      </div>
    </HeadPage>
    <div v-if="reying.length > 0 && active === '1'" class="scroll-height">
      <div class="hot-movie-item" v-for="(item, index) in reying" :key="index" @click="lookMovieDetail(item)">
        <div class="movie-left">
          <img class="movie-image" :src="item.imageUrl" alt="" />
          <div class="movie-info">
            <div class="movie-name">{{ item.nm }}</div>
            <div class="movie-sc" v-if="item.globalReleased">
              <span class="grade" v-if="item.sc > 0">评分：{{ item.sc }}</span>
              <span v-else>暂无评分</span>
            </div>
            <div class="movie-wish" v-else>{{ item.wish }}想看</div>
            <div class="movie-star">主演：{{ item.star }}</div>
            <div class="movie-show-info">{{ item.showInfo }}</div>
          </div>
        </div>
        <div v-if="item.showst === 3" class="buy-ticket">购票</div>
        <div v-if="item.showst === 1" class="wish-look">想看</div>
        <div v-if="item.showst === 4" class="yushou">预售</div>
      </div>
    </div>

    <div class="scroll-width" v-if="active === '2'">
      <div class="title">近期最受期待</div>
      <div class="p15 pt10">
        <scroll-view scroll-x v-if="mostExpectedList.length > 0" @scrolltolower="bindscrolltolower">
          <div class="scroll-x-box">
            <div class="scroll-x-item" v-for="(item, index) in mostExpectedList" :key="index">
              <img class="scroll-x-img" :src="item.imageUrl" alt="">
              <div class="name">{{item.nm}}</div>
              <div class="wish-look">{{item.wish}}人想看</div>
              <div class="look-time">{{item.date}}</div>
            </div>
          </div>
        </scroll-view>
      </div>
      <DividerBox />
      <div class="p15 pt10" v-if="jijiangshangying.length > 0">
        <div v-for="(item, index) in jijiangshangying" :key="index">
          <div v-if="index === 0 || jijiangshangying[index-1].comingTitle !== item.comingTitle" class="top-time">{{item.comingTitle}}</div>
          <div class="hot-movie-item">
            <div class="movie-left">
              <img class="movie-image" :src="item.imageUrl" alt="" />
              <div class="movie-info">
                <div class="movie-name">{{ item.nm }}</div>
                <div class="movie-sc" v-if="item.globalReleased">
                  <span class="grade" v-if="item.sc > 0">评分：{{ item.sc }}</span>
                  <span v-else>暂无评分</span>
                </div>
                <div class="movie-wish" v-else>{{ item.wish }}想看</div>
                <div class="movie-star">主演：{{ item.star ? item.star : '-' }}</div>
                <div class="movie-show-info">{{ item.showInfo }}</div>
              </div>
            </div>
            <div v-if="item.showst === 3" class="buy-ticket">购票</div>
            <div v-if="item.showst === 1" class="wish-look">想看</div>
            <div v-if="item.showst === 4" class="yushou">预售</div>
          </div>
        </div>
      </div>
    </div>

    <div class="loading-page" v-if="(active === '1' && reying.length < 0) || (active === '2' && mostExpectedList.length <= 0)">
      <van-loading size="24px" color="#e54847" vertical>加载中...</van-loading>
    </div>
    <div class="load-flag" v-if="loadFlag">
      <van-loading size="24px" color="#e54847" vertical>正在加载...</van-loading>
    </div>
    <div class="load-flag" v-if="moreDataFlag">
      <div>暂无更多数据</div>
    </div>
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import Dialog from "../../../static/vant/dialog/dialog";
import HeadPage from "../../components/headPage.vue";
import request from "../../utils/request";
import DividerBox from '../../components/dividerBox.vue'
export default {
  data() {
    return {
      active: "1",
      reying: [],
      mostExpectedList: [], // 近期最受期待数据
      mostExpectedTotal: 0, // 近期最受期待数据总数
      jijiangshangying: [], // 即将上映数据
      movieIds: [],
      jijiangMovieIds: [],
      loadFlag: false,
      moreDataFlag: false,
      locationPopupFlag: false,
    };
  },
  onLoad() {
    this.getHotList()
  },
  components: {
    HeadPage,
    DividerBox
  },
  // 小程序滚动触底触发的事件
  onReachBottom() {
    this.loadFlag = true;
    this.moreDataFlag = false;
    if (this.active === '1') {
      this.getMoreMovieInfos(this.reying, this.movieIds, 0);
    } else {
      this.getMoreMovieInfos(this.jijiangshangying, this.jijiangMovieIds, 1);
    }
  },
  methods: {
    // 获取正在热映的列表
    async getHotList() {
      try {
        let res = await request({
          api: "/ajax/movieOnInfoList",
        });
        this.reying = res[0].movieList.map((item) => {
          return {
            ...item,
            imageUrl: item.img.replace("w.h/", ""),
          };
        });
        this.movieIds = res[0].movieIds;
      } catch (error) {
      }
    },
    // 近期最受期待数据
    async getMostExpectedList() {
      try {
        let res = await request({
          api: "/ajax/mostExpected?limit=10&offset=0&token=",
        });
        this.mostExpectedList = res[0].coming.map((item) => {
          return {...item, imageUrl: item.img.replace("w.h/", ""), date: item.comingTitle.split(" ")[0]}
        })
        this.mostExpectedTotal = res[0].paging.total
      } catch (error) {
      }
    },
    // 加载更多数据
    async getMoreMovieInfos(dataList, movieIds, item) {
      // 做一个判断防止就算没有更多数据了还是会做请求
      if (dataList.length >= movieIds.length) {
        this.loadFlag = false;
        this.moreDataFlag = true;
        return;
      }
      let query = movieIds
        .slice(dataList.length, dataList.length + 10)
        .join("%2C");
      try {
        let res = await request({
          api: `/ajax/moreComingList?token=&movieIds=${query}`,
        });
        if (res[0].coming.length <= 0) {
          this.moreDataFlag = true;
          this.loadFlag = false;
        } else {
          if (item === 0) {
            this.reying = dataList.concat(
              res[0].coming.map((item) => {
                return { ...item, imageUrl: item.img.replace("w.h/", "")};
              })
            );
          } else {
            this.jijiangshangying = dataList.concat(
              res[0].coming.map((item) => {
                return { ...item, imageUrl: item.img.replace("w.h/", "")};
              })
            );
          }
        }
      } catch (error) {
      }
    },
    // 即将上映数据
    async getJiJiangShangying() {
      try {
        let res = await request({
          api: '/ajax/comingList',
          data: {
            limit: 10,
            optimus_uuid: 'B52C96001E4B11EA928853AC6CFDBC0221750D6FF9374A35B50A070B3195ED15',
            optimus_risk_level: 71,
            optimus_code: 10,
            token: ''
          }
        });
        this.jijiangshangying = res[0].coming.map((item) => {
          return {...item, imageUrl: item.img.replace("w.h/", "")}
        })
        this.jijiangMovieIds = res[0].movieIds;
      } catch (error) {
      }
    },
    // 横向滚动，滚动到最后加载更多
    bindscrolltolower() {
      this.getScrollXData()
    },
    // 横向加载更多
    async getScrollXData() {
      if (this.mostExpectedList.length >= this.mostExpectedTotal) {
        return
      }
      try {
        let res = await request({
          api: "/ajax/mostExpected",
          data: {
            limit: 10,
            offset: this.mostExpectedList.length,
            token:''
          }
        })
        this.mostExpectedList = this.mostExpectedList.concat(res[0].coming.map((item) => {
          return {...item, imageUrl: item.img.replace("w.h/", ""), date: item.comingTitle.split(" ")[0]}
        }))
      } catch (error) {
      }
    },
    locationPopupHandel() {
      Dialog.alert({
        message: "位置获取失败，请重新进入以获取地理位置",
      });
    },
    // 搜索按钮
    searchHandel() {
    },
    // tab改变
    tabsChange(e) {
      this.active = e.target.name;
      this.loadFlag = false;
      this.moreDataFlag = false;
      if (this.active === "2") {
        this.getMostExpectedList();
        this.getJiJiangShangying()
      }
    },
    // 查看详情
    lookMovieDetail(data) {
      console.log(data);
      wx.navigateTo({
        url: `../movieDetail/main?id=${data.id}`
      });
    }
  },
};
</script>

<style lang="less" scoped>
@import "./index.module.less";
</style>